<template>
	<view class="tab-nav">
		<view class="nav custom flex justify-between align-center">
			<scroll-view scroll-x class="flex-sub left nav" scroll-with-animation :scroll-left="scrollLeft">
				<block v-for="(item,index) in tabList" :key="index">
					<view class="cu-item text-white text-sm" :class="{'active':index===tabCur}" @tap="tabSelect(index)" :style="{padding:`0 ${cusPadding}rpx`}">
						{{tabKey?item[tabKey]:item}}
					</view>
				</block>
			</scroll-view>
			<view class="right flex justify-center align-center" v-if="isShowMenu" @click="showMenu">
				<view class="img-box-menu flex justify-center align-center">
					<image src="/static/images/menu-01.png" mode="widthFix"/>
				</view>
			</view>
		</view>
		<!-- 菜单 -->
		<view v-if="isShowMenu&&isShow" class="menu-wrap" @touchmove.stop="" @click="showMenu">
			<view class="menu-cont padding-sm" @click.stop="">
				<block v-for="(item,index) of tabList" :key="index">
					<view class="select-item flex justify-center align-center" :class="[index===curIndex?'active2':'']" @click.stop="handleSelect(index)">
						{{tabKey?item[tabKey]:item}}
					</view>
				</block>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		name: 'tab-nav',
		props: {
			tabList: {
				type: Array,
				default () {
					return []
				}
			},
			tabCur: {
				type: Number,
				default: 0
			},
			isShowMenu: {
				type: Boolean,
				default: false
			},
			cusPadding: {
				type: Number,
				default: 10
			},
			tabKey:{
				type:String,
				default:""
			}
		},
		data() {
			return {
				scrollLeft: 0,
				curIndex:-1,
				isShow:false
			}
		},
		methods: {
			tabSelect(index) {
				this.scrollLeft = (index - 1) * 50
				this.$emit('tabSelect', Number(index))
			},
			handleSelect(index){
				this.curIndex=index
				this.$emit('tabSelect', Number(index))
				this.showMenu()
			},
			showMenu(){
				this.isShow=!this.isShow
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tab-nav {
		position: relative;

		.nav.custom {
			background-color: $mainColor;

			.left {
				height: 90rpx;
				overflow: auto;

				.cu-item {
					margin: 0;
					&.active {
						font-size: 28rpx;
						position: relative;
						&::after {
							content: '';
							display: block;
							width: 20rpx;
							height: 4rpx;
							background-color: #fff;
							position: absolute;
							left: 0;
							right: 0;
							margin: auto;
							bottom: 10rpx;
						}
					}
				}
			}

			.right {
				width: 90rpx;
				height: 90rpx;
				flex-shrink: 0;
				color: #fff;
				line-height: 90rpx;

				.img-box-menu {
					width: 36rpx;
					height: 36rpx;
				}
			}
		}

		.menu-wrap {
			position: absolute;
			top:90rpx;
			left:0;
			right:0;
			width:100%;
			height:calc(100vh - 90rpx);
			background:rgba(0,0,0,0.5);
			z-index:1000;
			.menu-cont{
				min-height: 300rpx;
				display: grid;
				grid-template-columns: repeat(4, 1fr);
				grid-template-rows: repeat(4, 1fr);
				background: #fff;
				.select-item {
					min-width: 120rpx;
					height: 50rpx;
					padding: 0 20rpx;
					border-radius: 25rpx;
					background-color: $bgColor;
					margin-right: 20rpx;
					font-size: 24rpx;
					color: #000;
					&.active {
						color: $mainColor;
					}
				
					&.active2 {
						background-color: $mainColor;
						color: #fff;
					}
				}
			}
		}
	}
</style>
